<template>
  <div>
    <el-form :model="compForm" :rules="compRule" size="mini" ref="form" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="发货方：" prop="orShipper" v-if="desc">
            <el-select
              clearable
              v-model="compForm.orShipper"
              disabled
              @change="changeContactSend"
              style="width:100%"
              filterable
              allow-create
            >
              <el-option
                v-for="(item,index) in send"
                :key="index"
                :label="item.orShipper"
                :value="item.orShipper"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收货方：" prop="orReveivingparty" v-else>
            <el-select
              clearable
              v-model="compForm.orReveivingparty"
              disabled
              @change="changeContactReceive"
              style="width:100%"
              filterable
              allow-create
            >
              <el-option
                v-for="(item,index) in accept"
                :key="index"
                :label="item.orReveivingparty"
                :value="item.orReveivingparty"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="联系人：" prop="lxr">
            <el-input clearable v-model="compForm.lxr" disabled style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="联系电话：" prop="lxdh">
            <el-input clearable v-model="compForm.lxdh" disabled maxlength="11" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20" v-if="desc">
          <el-form-item label="装车时间段：" prop="adcSSwrkdate">
            <el-time-select
              clearable
              placeholder="开始时间"
              v-model="compForm.adcSSwrkdate"
              style="width:45%"
              :disabled="view==='1'"
              :picker-options="{
                          start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
              editable
            ></el-time-select>
            <div class="holdline">&emsp;—&emsp;</div>
            <el-time-select
              clearable
              placeholder="结束时间"
              style="width:45%"
              :disabled="view==='1'"
              v-model="compForm.adcSEwrkdate"
              :picker-options="{
                        start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
              editable
            ></el-time-select>
          </el-form-item>
        </el-col>
        <el-col :span="20" v-else>
          <el-form-item label="卸车时间段：" prop="adcDSfinwrkdate">
            <el-time-select
              clearable
              placeholder="开始时间"
              v-model="compForm.adcDSfinwrkdate"
              style="width:45%"
              :disabled="view==='1'"
              :picker-options="{
                          start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
              editable
            ></el-time-select>
            <div class="holdline">&emsp;—&emsp;</div>
            <el-time-select
              clearable
              placeholder="结束时间"
              style="width:45%"
              v-model="compForm.adcDEfinwrkdate"
              :disabled="view==='1'"
              :picker-options="{
                        start: '00:00',
                          step: '00:01',
                          end: '23:59'
                        }"
              editable
            ></el-time-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--                <el-row>-->
      <!--                  <el-form-item label="地址：" prop="district">-->
      <!--                    <el-row>-->
      <!--                       <el-col :span="6">-->
      <!--                        <el-select clearable v-model="compForm.province"  :disabled="view==='1'" @change="getCity" filterable>-->
      <!--                          <el-option v-for="(item,index) in province" :key="index" :label="item.prvChnname" :value="item.prvCode"></el-option>-->
      <!--                        </el-select>-->
      <!--                       </el-col>-->
      <!--                       <el-col :span="7">-->
      <!--                        <el-select clearable style="width: 90%; margin-left: 5%;" v-model="compForm.city"  :disabled="view==='1'" @change="getDc" filterable>-->
      <!--                          <el-option v-for="(item,index) in city" :key="index" :label="item.ctyeChnname" :value="item.ctyeCode"></el-option>-->
      <!--                        </el-select>-->
      <!--                       </el-col>-->
      <!--                       <el-col :span="6">-->
      <!--                        <el-select clearable v-model="compForm.district"  :disabled="view==='1'" filterable >-->
      <!--                          <el-option v-for="(item,index) in district" :key="index" :label="item.ctyChnname" :value="item.ctyCode"></el-option>-->
      <!--                        </el-select>-->
      <!--                       </el-col>-->
      <!--                    </el-row>-->
      <!--                    </el-form-item>-->
      <!--                </el-row>-->

      <!--       :disabled="view==='1'"-->
      <el-row>
        <el-form-item label="详细地址：" prop="xxdz">
          <el-col :span="19">
            <el-input
              clearable
              v-model="compForm.xxdz"
              @change="getLongWei"
              disabled
              maxlength="128"
            ></el-input>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="经纬度：" prop="jd">
          <el-col :span="8">
            <el-input clearable style="width: 95%;" v-model="compForm.jd" :disabled="view==='1'"></el-input>
          </el-col>
          <el-col :span="8">
            <el-input clearable style="width: 95%;" v-model="compForm.wd" :disabled="view==='1'"></el-input>
          </el-col>
          <el-col :span="4">
            <el-link
              style="margin-left: 15%;"
              type="primary"
              @click="openMap"
              :underline="false"
              v-if="view!='1'"
            >地图定位</el-link>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <el-dialog
      title="地图定位"
      width="50%"
      :visible.sync="showMap"
      v-if="showMap"

      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <!-- <baidu-map :height="height"  :mapInfo="showMapInfo" @choose="savePot"></baidu-map> -->
       <baidu-map @choose="savePot" :mapInfo="showMapInfo"></baidu-map>
      <div class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProvince,
  getUrban,
  getDistrict,
  getReceiver,
  getSender
} from '@/request/api'
import baiduMap from '@/components/baidumapb'
export default {
  props: {
    compForm: {
      type: Object,
      required: true
    },
    desc: {
      type: Boolean,
      required: true
    },
    view: {
      type: String,
      required: true
    },
    formname: {
      type: String,
      required: true
    },
    cltId: {
      type: String,
      default: ''
    }
  },
  watch: {
    cltId() {
      this.getSenderOrReceiver()
    },
    compForm: {
      handler() {
        console.log('侦听compForm.xxdz')
      }
    }
  },
  data() {
    return {
      height: 200,
      showMap: false,
      compRule: {
        orShipper: [
          { required: true, message: '请选择发货人', trigger: 'blur' }
        ],
        orReveivingparty: [
          { required: true, message: '请选择收货人', trigger: 'blur' }
        ],
        lxr: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        lxdh: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        // adcSSwrkdate: [
        //   { required: true, message: '请选择装车时间段', trigger: 'blur' }
        // ],
        // adcDSfinwrkdate: [
        //   { required: true, message: '请选择卸车时间段', trigger: 'blur' }
        // ],
        district: [{ required: true, message: '请选择地址', trigger: 'blur' }],
        xxdz: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
      },
      send: [], //发货方
      accept: [], //收货方
      province: [], //省
      city: [], //市
      district: [], //区
      showMapInfo: {},//地图传值
    }
  },

  components: { baiduMap },
  mounted() {
    this.getSenderOrReceiver()
    getProvince().then(res => {
      if (res.success === '1') {
        this.province = res.data
      }
    })

    if (this.compForm.province) {
      getUrban({ prvCode: this.compForm.province }).then(res => {
        if (res.success === '1') {
          this.city = res.data
        }
      })
    }

    if (this.compForm.city) {
      getDistrict({ ctyeCode: this.compForm.city }).then(res => {
        if (res.success === '1') {
          this.district = res.data
        }
      })
    }
  },
  methods: {
    getSenderOrReceiver() {
      if (this.desc) {
        getSender(this.cltId).then(res => {
          console.log(res, 111111111111)
          this.send = res.data
        })
      } else {
        getReceiver(this.cltId).then(res => {
          console.log(res, 111111111111)
          this.accept = res.data
        })
      }
    },
    // 更换发货人
    changeContactSend(name) {
      const sender = this.send.find(item => item.orShipper === name)
      if (sender) {
        this.compForm.lxr = sender.orShippercontacts
        // this.compForm.xxdz = sender.adcSAddress
        this.compForm.lxdh = sender.orShippertel
      }
    },
    // 更换收货人
    changeContactReceive(name) {
      const receiver = this.accept.find(item => item.orReveivingparty === name)
      if (receiver) {
        this.compForm.lxr = receiver.orReveivingpartycontacts
        // this.compForm.xxdz = receiver.adcDAddress
        this.compForm.lxdh = receiver.orReveivingpartytel
      }
    },
    //获取区
    getDc(name) {
      this.district = []
      this.compForm.district = ''
      if (name) {
        getDistrict({ ctyeCode: name }).then(res => {
          if (res.success === '1') {
            this.district = res.data
          }
        })
      }
    },
    //获取市
    getCity(name) {
      this.compForm.city = ''
      this.compForm.district = ''
      this.city = []
      if (name) {
        getUrban({ prvCode: name }).then(res => {
          if (res.success === '1') {
            this.city = res.data
          }
        })
      }
    },
    //保存坐标
    savePot(res) {
      if (res) {
        this.compForm.jd = res.point.lng
        this.compForm.wd = res.point.lat
        //详细地址不带过来
        // this.compForm.xxdz=res.address

        // this.compForm.province=res.addressComponents.province
        // this.compForm.city=res.addressComponents.city
        // this.compForm.district=res.addressComponents.district
        this.$confirm('选取坐标成功!', '提示', {
          confirmButtonText: '确定'
        })
          .then(() => {
            this.showMap = false
          })
          .catch(() => {
            this.compForm.potX = ''
            this.compForm.potY = ''
          })
      }
    },
    // 验证 模仿 element 的验证方式
    validate(callback) {
      this.$refs.form.validate(valid => {
        callback(valid)
      })
    },
    //打开地图
    openMap() {
      if (!this.check) {
        this.showMapInfo = {
          xxdz : this.compForm.xxdz
        }
        console.log(this.showMapInfo , 'this.showMapInfo ssssss')
        this.showMap = true
      }
    },
    getLongWei(address) {
      this.$jsonp('https://api.map.baidu.com/geocoding/v3/', {
        address: address,
        output: 'json',
        ak: 'klVHCMMpLMNTWIknViZZOrKKEYVn8OOU'
      })
        .then(json => {
          console.log(json, 'json')
          this.compForm.jd = json.result.location.lng //经度
          this.compForm.wd = json.result.location.lat //纬度
        })
        .catch(err => {
          console.log(err, 'err')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.holdline {
  display: inline-block;
  text-align: center;
  width: 10%;
}
</style>

